import React from 'react'
import { Button, Tabs } from 'antd';
import AllXunDan from './AllXunDan';
import { useNavigate } from 'react-router-dom';

const tablist = [{ id: 1, lable: '全部' }, { id: 2, lable: '审核中' }, { id: 3, lable: '有效报价' }, { id: 4, lable: '过期报价' }]
const onChange = (key: string) => {
  console.log(key);
};
const tabbar = (id: number) => {
  if (id === 1) {
    return <AllXunDan></AllXunDan>
  } else if (id === 2) {
    return <div>审核中</div>
  } else if (id === 3) {
    return <div>有效报价</div>
  } else if (id === 4) {
    return <div>过期报价</div>
  }
}

export default function Index() {
  const navigate = useNavigate();
  return (
    <div style={{ position: 'relative' }}>
      <Tabs
        onChange={onChange}
        type="card"
        items={tablist.map((v) => {
          return {
            label: v.lable,
            key: v.id.toString(),
            children: tabbar(v.id),
          };
        })}
      />
      <div style={{ position: 'absolute', top: '8px', right: '20px', width: '180px', display: 'flex', justifyContent: 'space-between' }}>
        <Button color="primary" variant="outlined">
          下订单
        </Button>
        <Button color="primary" variant="solid" onClick={() => { navigate('/admin/addxundan') }}>
          创建询价单
        </Button>
      </div>
    </div>

  )
}
